<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid与Flex布局练习</title>
    <style>
        /* 基础样式与重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
         
        /* Grid布局 - 整体页面结构 */
        .page-container {
            display: grid;
            grid-template-rows: auto auto 1fr auto;/* 第三行为 扣除一二四内容的剩余内容*/
            grid-template-columns: 1fr;/* 占据flex容器的所有宽度*/
            min-height: 100vh;/* 可视高度为浏览器的100% 提高视觉完整性*/
            grid-template-areas: 
                "header"
                "nav"
                "main"
                "footer";
        }
        
        /* 页眉区域 */
        header {
            grid-area: header;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .tagline {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        /* 导航区域 - 使用Flexbox */
        nav {
            grid-area: nav;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 0 1rem;
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 1.5rem;
        }
        
        .nav-links a {
            display: block;
            padding: 1rem 0;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #6a11cb;
        }
        
        .search-box {
            display: flex;
            align-items: center;
        }
        
        .search-box input {
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        
        .search-box button {
            padding: 0.5rem 1rem;
            background-color: #6a11cb;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        
        /* 主要内容区域 - 使用Grid */
        main {
            grid-area: main;
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 2rem;
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        
        /* 文章区域 - 使用Flexbox */
        .articles {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .article-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .article-image {
            height: 200px;
            overflow: hidden;
        }
        
        .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .article-card:hover .article-image img {
            transform: scale(1.05);
        }
        
        .article-content {
            padding: 1.5rem;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: #666;
        }
        
        .article-tags {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        .tag {
            background-color: #f0f0f0;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
        }
        
        /* 侧边栏 - 使用Flexbox */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .sidebar-widget {
            background-color: white;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .widget-title {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .popular-posts {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .popular-post {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .popular-post img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            object-fit: cover;
        }
        
        .categories-list {
            list-style: none;
        }
        
        .categories-list li {
            padding: 0.5rem 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .categories-list li:last-child {
            border-bottom: none;
        }
        
        .categories-list a {
            display: flex;
            justify-content: space-between;
        }
        
        .categories-list span {
            background-color: #f0f0f0;
            padding: 0.2rem 0.5rem;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        /* 页脚区域 */
        footer {
            grid-area: footer;
            background-color: #333;
            color: white;
            padding: 2rem 1rem;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-section h3 {
            margin-bottom: 1rem;
            color: #6a11cb;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        
        .footer-links a:hover {
            color: #6a11cb;
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background-color: #444;
            border-radius: 50%;
            transition: background-color 0.3s;
        }
        
        .social-links a:hover {
            background-color: #6a11cb;
        }
        
        .copyright {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #444;
        }
        
       
    </style>
</head>
<body>
    <div class="page-container">
        <header>
            <div class="logo">TechBlog</div>
            <div class="tagline">探索技术与创新的前沿</div>
        </header>
        
        <nav>
            <div class="nav-container">
                <ul class="nav-links">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">后端技术</a></li>
                    <li><a href="#">移动开发</a></li>
                    <li><a href="#">设计资源</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
                <div class="search-box">
                    <input type="text" placeholder="搜索文章...">
                    <button>搜索</button>
                </div>
            </div>
        </nav>
        
        <main>
            <div class="articles">
                <article class="article-card">
                    <div class="article-image">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Grid与Flex布局对比">
                    </div>
                    <div class="article-content">
                        <h2>Grid与Flex布局：何时使用哪种？</h2>
                        <div class="article-meta">
                            <span>作者：张明</span>
                            <span>2023年10月15日</span>
                        </div>
                        <p>Grid布局和Flexbox是CSS中两种强大的布局工具，但它们各有不同的应用场景。本文详细比较了这两种布局方式，帮助你做出正确的选择...</p>
                        <div class="article-tags">
                            <span class="tag">CSS</span>
                            <span class="tag">布局</span>
                            <span class="tag">前端开发</span>
                        </div>
                    </div>
                </article>
                
                <article class="article-card">
                    <div class="article-image">
                        <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="响应式设计">
                    </div>
                    <div class="article-content">
                        <h2>现代响应式设计的最佳实践</h2>
                        <div class="article-meta">
                            <span>作者：李华</span>
                            <span>2023年10月10日</span>
                        </div>
                        <p>随着移动设备的普及，响应式设计已成为现代网站开发的标准。本文介绍了最新的响应式设计技术和工具，帮助你创建适应各种屏幕尺寸的完美体验...</p>
                        <div class="article-tags">
                            <span class="tag">响应式设计</span>
                            <span class="tag">CSS</span>
                            <span class="tag">移动端</span>
                        </div>
                    </div>
                </article>
                
                <article class="article-card">
                    <div class="article-image">
                        <img src="https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="JavaScript框架">
                    </div>
                    <div class="article-content">
                        <h2>2023年JavaScript框架趋势分析</h2>
                        <div class="article-meta">
                            <span>作者：王强</span>
                            <span>2023年10月5日</span>
                        </div>
                        <p>React、Vue、Angular和Svelte，哪个框架最适合你的下一个项目？本文分析了当前主流JavaScript框架的优缺点，并预测了未来的发展趋势...</p>
                        <div class="article-tags">
                            <span class="tag">JavaScript</span>
                            <span class="tag">框架</span>
                            <span class="tag">前端</span>
                        </div>
                    </div>
                </article>
            </div>
            
            <aside class="sidebar">
                <div class="sidebar-widget">
                    <h3 class="widget-title">热门文章</h3>
                    <div class="popular-posts">
                        <div class="popular-post">
                            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="热门文章1">
                            <div>
                                <h4>CSS Grid布局完全指南</h4>
                                <span>2023-09-28</span>
                            </div>
                        </div>
                        <div class="popular-post">
                            <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="热门文章2">
                            <div>
                                <h4>Flexbox实战技巧</h4>
                                <span>2023-09-20</span>
                            </div>
                        </div>
                        <div class="popular-post">
                            <img src="https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="热门文章3">
                            <div>
                                <h4>JavaScript ES2023新特性</h4>
                                <span>2023-09-15</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="sidebar-widget">
                    <h3 class="widget-title">文章分类</h3>
                    <ul class="categories-list">
                        <li><a href="#">前端开发 <span>24</span></a></li>
                        <li><a href="#">后端技术 <span>18</span></a></li>
                        <li><a href="#">移动开发 <span>12</span></a></li>
                        <li><a href="#">设计资源 <span>15</span></a></li>
                        <li><a href="#">工具推荐 <span>9</span></a></li>
                    </ul>
                </div>
                
                <div class="sidebar-widget">
                    <h3 class="widget-title">订阅我们</h3>
                    <p>订阅我们的新闻通讯，获取最新的技术文章和资源。</p>
                    <div class="search-box" style="margin-top: 1rem;">
                        <input type="email" placeholder="输入您的邮箱">
                        <button>订阅</button>
                    </div>
                </div>
            </aside>
        </main>
        
        <footer>
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>TechBlog是一个专注于技术分享的博客平台，致力于为开发者提供高质量的技术文章和资源。</p>
                    <div class="social-links">
                        <a href="#" aria-label="微博">微</a>
                        <a href="#" aria-label="微信">微</a>
                        <a href="#" aria-label="GitHub">G</a>
                        <a href="#" aria-label="知乎">知</a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">投稿指南</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>邮箱: contact@techblog.com</p>
                    <p>电话: +86 123 4567 8900</p>
                    <p>地址: 北京市朝阳区科技园区</p>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 TechBlog 版权所有</p>
            </div>
        </footer>
    </div>
</body>
</html>